<template>
<view>
    123

        <view
          v-for="(item) in product.data"
          :key="item._id"
          class="shop-card"
          
        >
          <image class="shop-image" :src="item.imgUrl" mode="aspectFill"></image>
          <view class="shop-info">
            <view class="shop-name">{{ item.name }}</view>
            <view class="shop-sales">月售 {{ item.sales }} 单</view>
            
            <view class="shop-slogan">{{ item.slogan }}</view>
          </view>
        </view>
</view>
     
</template>
<script>
import config from "@/Config.js";

export default ({
    data() {
        return{
            product:[]
        }
    },
    onload(){
        this.query()
    },
    onShow(){
        this.query()
    },
    methods:{
        query(){
             uni.request({
        url: config.config+'/hotlist',
        method: 'GET',
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => {
          console.log('请求成功:', res)
          this.product = res
        }
      })
        }
    }
})
</script>
<style scoped>
/* Main container */
view {
  box-sizing: border-box;
}

/* Shop card container */
.shop-card {
  display: flex;
  margin: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.shop-card:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* Shop image */
.shop-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  object-fit: cover;
}

/* Shop info container */
.shop-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Shop name */
.shop-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sales information */
.shop-sales {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

/* Delivery information */
.shop-delivery {
  display: flex;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.shop-delivery text {
  margin-right: 20rpx;
}

/* Shop slogan */
.shop-slogan {
  font-size: 24rpx;
  color: #e93b3b;
  padding: 6rpx 12rpx;
  background-color: #ffeeee;
  border-radius: 4rpx;
  align-self: flex-start;
}
</style>
